<template>
  <div>
    <div class="outmain ba_f formwidth">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>支付宝小程序页面路径</span>
        </div>
      </div>
      <div>
        <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" class="mar_t20" style="width: 100%">
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="page" label="链接"></el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="copyText(scope.row)">复制链接</el-button>
              <el-button size="mini" @click="openCode(scope.row)">查看二维码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="二维码" :visible.sync="dialogVisible" :close-on-click-modal="false" width="30%">
      <div class="t_c">
        <img v-if="codeImg" :src="codeImg" class="imgCode" style="width: 300px;height: 330px"/>
        <p v-else>{{ warningText }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false" size="medium">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAlipayCode, getPage } from '@/api/setup';
export default {
  data() {
    return {
      dialogVisible: false,
      list: [],
      codeImg: '',
      warningText: '',
      listLoading: true,
      selectRows: '',
      elementLoadingText: '正在加载...'
    };
  },
  created() {
    this.bus.$emit('loading', true);
    this.init();
  },
  methods: {
    init() {
      this.fetchData();
    },
    openCode(obj) {
      getAlipayCode({ page: obj.page, pageType: 'ali' }).then((res) => {
        if (res.code == 1) {
          if (res.data.code == 1) {
            this.codeImg = res.data.data;
          } else {
            this.warningText = res.data.msg;
          }
          this.dialogVisible = true;
        }
      });
    },
    async fetchData() {
      this.listLoading = true;
      const { data } = await getPage({ page: 'miniPage' });
      this.list = data;
      this.bus.$emit('loading', false);
      this.listLoading = false;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    copyText(row) {
      let Url2 = row.page;
      var oInput = document.createElement('input');
      oInput.value = Url2;
      console.log(oInput.value);
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand('Copy');
      oInput.className = 'oInput';
      oInput.style.display = 'none';
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    },
    async onSubmit() {}
  }
};
</script>
<style  lang="scss" scoped>
.imgCode {
  width: 200px;
  height: 200px;
}
</style>

